@import "../../../commonStyle/reset";
@import "../../../commonStyle/var";
@import "../../../commonStyle/tool";
@import "../../../commonStyle/common";
@import "./var";
@import "./tool";
@import "./common";
@import "./icon";



main{

}

body{
  height: auto;
}

footer{
  font-size: .24rem;
  color: @light-black;
  line-height: 1.5;
  padding-top: .55rem;
  padding-bottom: .55rem;
  .top,.bottom{
    .flex-center;
  }
  .top{
    margin-bottom: 5px;
    a,span{
      & + a,& + span{
        margin-left: .2rem;
        border-left: 1px solid #a5a6a8;
        padding-left: .2rem;
      }
    }
  }
  .bottom{
    a{
      & + a{
        margin-left: .4rem;
      }
    }
  }
}

.page-index{
  position: relative;
  &:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2.63rem;
    .bg(bg-index,png);
  }

  header{
    position: relative;
    z-index: 1;
    .container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 1.15rem;
      .logo{
        display: inline-block;
        height: .9rem;
      }
      select{
        border-color: transparent;
        font-size: .28rem;
        height: .4rem;
        display: flex;
        align-items: center;
        color: #fff;
        background-color: transparent;
        option{
          color: @light-black;
        }
      }
    }
  }

  main{
    .banner{
      box-shadow: 0 2px 46px 0 rgba(181, 10, 18, 0.24);
      margin-bottom: @space_bottom;
      border-radius: 4px;
      overflow: hidden;
      .swiper-container{
        border-radius: 7px;
        .swiper-pagination{
          position: absolute;
          right: 0;
          bottom: 0;
          width: auto;
          left: unset;
          padding-right: .15rem;
          .swiper-pagination-bullet{
            background-color: #fff;
            opacity: .5;
            &.swiper-pagination-bullet-active{
              opacity: 1;
            }
          }
        }
      }
    }
    .release-btn-area{
      margin-bottom: @space_bottom;
      height: 1.35rem;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 4px;
    }
    .search-form{
      margin-bottom: .3rem;
    }
  }

}

.page-wish-detail{
  main{
    background-color: @bg-color;
  }
  .cover{
    .img-wrap(100%, 4.7rem);
    position: relative;
    .tag{
      position: absolute;
      left: @space_hor;
      top: .3rem;
    }
    .btn-wish-share{
      position: absolute;
      right: @space_hor;
      top: .3rem;
      border-color: #fff;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 2px 2px rgba(51, 51, 51, 0.1);
    }
  }
  .main-wrapper{
    position: relative;
    z-index: 2;
    margin-top: -.6rem;
    .wish-panel{
      padding-bottom: .3rem;
      .title-wrapper{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: .2rem;
        line-height: 1.5;
        .title{
          font-size: .32rem;
          color: @black;
        }
        .area{
          margin-left: .2rem;
          flex-shrink: 0;
          font-size: .24rem;
          color: @light-black;
        }
      }
      .raise-time{
        font-size: .24rem;
        margin-bottom: .2rem;
      }
      .raise-list{
        >li{
          .raise-list-title{
          }
          .raise-list-count{
            font-size: .3rem;
          }
        }
      }
    }
    .detail-panel{
      position: relative;
      .img-audit{
        position: absolute;
        right: @space_hor;
        top: .3rem;
        width: .92rem;
        height: .92rem;
      }
      .wish-summary-item{
        margin-bottom: .35rem;
        .title{
          font-size: .26rem;
          margin-bottom: .15rem;
          line-height: 1.5;
          color: @light-black;
        }
        .desc{
          color: @black;
          font-size: .28rem;
          line-height: 1.5;
        }
        &.wish-owner-name{
          display: flex;
          align-items: baseline;
          .title{
            margin-bottom: 0;
          }
        }
      }
      .wish-org-info{
        padding: .3rem .2rem;
        background-color: #faf0f0;
        border-radius: 4px;
        font-size: .26rem;
        >li{
          display: flex;
          align-items: flex-start;
          line-height: 1.5;
          & + li{
            margin-top: .15rem;
          }
          .title{
            flex-shrink: 0;
            color: @light-black;
          }
          .org-name{
            color: @black;
            border-bottom: 1px dashed #b8b1ae;
          }
        }
      }
    }
  }
}

.page-process-detail{
  .meta-panel{
    .title-bar{
      margin-bottom: .35rem;
    }
    .user-info{
      padding-bottom: .3rem;
      border-bottom: 1px solid @border;
      margin-bottom: .3rem;
    }
  }
  .process-meta{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    line-height: 1.5;
    margin-bottom: .2rem;
    .time{
      font-size: .26rem;
      color: @black;
    }
    .process-meta-info{
      font-size: .24rem;
      color: @blue;
      display: inline-flex;
      align-items: center;
    }
  }
}

.page-donate-index{
  .sub-title{
    margin-bottom: .2rem;
    color: @black;
    line-height: 1.5;
    font-size: .28rem;
  }
  .donate-desc{
    font-size: .24rem;
    color: @gray;
    padding-bottom: .35rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid @border;
  }
  .money-list{
    display: flex;
    align-items: center;
    font-size: .26rem;
    color: @black;
    margin-bottom: .2rem;
    margin-left: -.25rem;
    >li{
      margin-left: .25rem;
      transition: all .3s;
      cursor: pointer;
      height: .75rem;
      .flex-center;
      border-radius: 4px;
      background-color: @input-bg-color;
      width: calc((100% - .5rem) / 3);
      &.active{
        color: #fff;
        background-color: @red;
      }
    }
  }
  .is-need-bill{
    .form-field{
      display: flex;
      align-items: center;
      label{
        display: inline-flex;
        align-items: center;
        font-size: .26rem;
        &.need-bill{
          margin-right: .85rem;
        }
        &.not-need-bill{
          margin-right: .15rem;
        }
      }
      a{
        font-size: .28rem;
        color: @red;
        border-bottom: 1px dashed @red;
      }
    }
  }

}

.page-donate-success{
  padding: .9rem .6rem;
  main{
    .donate-wrapper{
      box-shadow: 0 0 16px 0 rgba(47, 47, 47, 0.3);
      border-radius: 4px;
      overflow: hidden;
      color: #fff;
      padding: 1.2rem .6rem 1.4rem;
      min-height: 8rem;
      margin-bottom: .8rem;
      .bg(bg-donate-cert,jpg);
      position: relative;
      &:before{
        content:'';
        position: absolute;
        right: -.2rem;
        top: -.2rem;
        .bg(cert-kind,png);
        width: 1.5rem;
        height: 1.5rem;
        z-index: 2;
      }
      &:after{
        content:'';
        position: absolute;
        right: .2rem;
        left: .2rem;
        top: .2rem;
        bottom: .2rem;
        .bg(donate-cert-line,png,center, 100% 100%);
        z-index: 1;
      }
      .logo{
        .img-wrap(100%, .8rem);
        margin-bottom: .6rem;
      }
      .desc{
        line-height: 1.8;
        font-size: .3rem;
        &.donator-name{
          margin-bottom: .25rem;
        }
        &.thanking{
          margin-bottom: .6rem;
        }
      }
      .bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .qr-code{
          .img-wrap(1.2rem,1.2rem);
          background-color: #fff;
        }
        .donate-info{
          font-size: .24rem;
          color: #fff;
          .org{
            margin-bottom: .1rem;
          }
          .time{

          }
        }
      }
    }
  }
}

.page-opera-success{
  padding-top: @page_space_top;
  padding-bottom: .3rem;
  main{
    padding: 0 .35rem .6rem;
  }
  .main-content{
    text-align: center;
    padding: 2.25rem 0;
    .icon-wrapper{
      margin-bottom: .5rem;
    }
    .title{
      color: @black;
      font-size: .36rem;
      line-height: 1.5;
      margin-bottom: .35rem;
    }
    .desc{
      line-height: 1.5;
      color: @light-black;
      font-size: .3rem;
    }
  }
}

.page-codonate{
  .top-panel{
    padding-top: .5rem;
    margin-bottom: .8rem;
  }
  .user-meta{
    padding-bottom: .4rem;
    border-bottom: 1px solid @border;
    margin-bottom: .4rem;
  }
  .start-reason-desc{
    font-size: .28rem;
    line-height: 1.5;
    color: @black;
  }
}

.page-donate-index,.page-wish-add{
  padding-bottom: .7rem;
  .panel{
    margin-bottom: .3rem;
  }
  .donate-agree{
    display: flex;
    align-items: center;
    margin-bottom: .7rem;
    label{
      display: flex;
      align-items: center;
    }
  }
}

.page-wish-add{
  .donate-desc{
    font-size: .24rem;
    color: @gray;
    line-height: 1.2;
  }
}

.page-fund-detail{
  .cover{
    .img-wrap(100%, 4.7rem);
  }
  .main-wrapper{
    margin-top: -.6rem;
    .fund-summary-panel{
      .fund-title{
        margin-bottom: .3rem;
        color: @black;
        line-height: 1.5;
        font-size: .32rem;
      }
    }
    .org-info-panel{
      .org-info{
        margin-bottom: .2rem;
      }
    }
    .panel-tab{
      padding-top: 0;
      .tab-list{
        border-bottom: 1px solid @border;
        &.posfixed-clone{
          width: auto;
          .container;
        }
      }
      .tab-content{
        .msg-list{
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
  }
}

.page-user-index,.page-volunteer-index{
  .meta{
    height: 2.8rem;
    .bg(bg-user-index,jpg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: -.6rem;
    .user-detail-wrapper{
      display: flex;
      align-content: center;
      flex-direction: column;
      align-items: center;
      height: 2.2rem;

      .user-detail{
        display: flex;
        align-items: center;
        .avatar-wrapper{
          padding: 2px;
          background-color: #fff;
          border-radius: 50%;
          margin-right: .2rem;
          .flex-center;
          .avatar{
            .avatar(1.2rem);
          }
        }
        .user-detail-content{
          color: #fff;
          .title{
            line-height: 1.2;
            font-size: .32rem;
            margin-bottom: .2rem;
            display: flex;
            align-items: center;
            .v-sign{
              margin-left: .1rem;
              font-size: .24rem;
              border-radius: 4px;
              border: 1px solid #fff;
              padding: 3px 5px;
            }
          }
          .desc{
            line-height: 1.2;
            font-size: .26rem;
          }
        }
      }
    }
  }
  .user-summary-list{
    >li{
      padding-left: .6rem !important;
    }
  }
  .user-menu-list{
    padding-top: .05rem;
    >li{
      border-bottom: 1px solid @border;
      a{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 1rem;
        color: @black;
        .left{
          display: flex;
          align-items: center;
          .icon-wrapper{
            display: flex;
            align-items: center;
            width: .55rem;
          }
        }
      }
    }
  }
}

.page-user-index{
  .meta{
    .user-detail-wrapper{
      justify-content: center;
      .org-desc{
      }
    }
  }
  .summary-list{
    >li{
      padding-left: .6rem !important;
    }
  }
}

.page-volunteer-index{
  .meta{
    .user-detail-wrapper{
      padding-top: .4rem;
      .org-desc{
        font-size: 12px;
        color: #ffd7d1;
        margin-top: .1rem;
      }
    }
  }
  .summary-list{
    >li{
      padding-left: .4rem;
      &:first-child{
        padding-left: 0;
      }
    }
  }
}

.page-user-profile{
  padding-bottom: 1rem;
  .panel{
    margin-bottom: .8rem;
  }
  .title-bar{
    margin-bottom: 0;
  }
  .avatar-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
    .avatar-wrapper__img{
      display: flex;
      align-items: center;
      .img{
        .avatar(.85rem);
      }
      .icon{
        margin-left: .24rem;
      }
    }
  }

  .avatar-popup{
    .popup-content{
      overflow: visible;
      .ossuploader-add p{
        font-size: 14px;
      }
    }
  }
}

.page-user-donate-list{
  padding-top: @page_space_top;
}

.page-user-msg-list{
  .msg-list{
    padding-left: 0;
    padding-right: 0;
    .space-list;
    >li{
      border-bottom: 0;
      &:first-child{
        padding-top: .3rem;
      }
    }
  }
}

.page-be-volunteer{
  padding-bottom: 1rem;
  .panel{
    padding-top: 0;
    margin-bottom: .7rem;
  }
  .join-time{
    margin-bottom: -.3rem;
    .form-field{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      label{
        display: inline-flex;
        align-items: center;
        width: 50%;
        margin-bottom: .3rem;
        .text{
          margin-left: .15rem;
          color: @gray;
        }
      }
    }
  }
}

#save-img-popup{
  .save-desc{
    font-size: 14px;
    color: @light-black;
    margin-bottom: .3rem;
  }
}

.page-login-tips{
  main{
    .bg(bg-login,jpg);
    padding: 1.3rem .8rem .3rem;
    .logo-img{
      text-align: center;
      margin-bottom: .6rem;
      img{
        height: 1.4rem;
      }
    }
    .content{
      padding: 1.1rem 1.15rem .75rem;
      background-color: #fff;
      border-radius: 4px;
      height: 6.6rem;
      .flex-center;
      flex-direction: column;
      text-align: center;
      font-size: 14px;
      line-height: 1.5;
      .qr_code_img{
        margin-bottom: .6rem;
      }
    }
  }
}

.wish-share-popup{
  padding: 0;
  background-color: transparent;
  .popup-content{
    margin: 0;
    margin-bottom: .8rem;
    border-radius: 4px;
    img{
      vertical-align: middle;
    }
  }
}

.share-wrapper{
  overflow: hidden;
  border-radius: 4px;
  background-color: transparent;
  &.share-wrapper-box{
    position: absolute;
    width: 80%;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .wish-share-cover{
    position: relative;
    .tag{
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .wish-share-content{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: .6rem .3rem .8rem;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    .left-size{
      margin-right: .4rem;
      flex-grow: 1;
      .left-size-title{
        font-size: .3rem;
        color: @black;
        line-height: 1.5;
      }
      .left-size-desc{
        line-height: 1.5;
        font-size: .26rem;
        color: @light-black;
        padding-bottom: .2rem;
        border-bottom: 1px solid @border;
      }
      .wish-owner{
        line-height: 1.5;
        padding-top: .25rem;
        font-size: .24rem;
        color: @gray;
      }
    }
    .right-size{
      .img-wrap(1.65rem,1.65rem);
    }
  }
}

@media (max-width: 500px){
  .page{
    .ossuploader-add, .ossuploader-dash-border{
      justify-content: center;
      border-radius: 4px;
      border-style: solid;
    }
    .ossuploader-dash-border{
      .ossuploader-filedelete{
        .icon-close-uploader_gray;
        color: transparent;
      }
    }
    .ossuploader-add{
      i{
        .icon-image-uploader_gray;
        left: unset;
        right: -.13rem;
        top: -.13rem;
      }
      p{
        margin-top: .1rem;
        font-size: 14px;
        line-height: 1.2;
      }
    }
  }
}

.avatar-popup{
  .ossuploader-dash-border{
    .ossuploader-filedelete{
      display: none;
    }
  }
}
